<% layout('/layout/default.html', {title: '图片裁剪 ', libs: ['cropper']}){ %>
<% 	
	var defaultBigUrl = @DictUtils.getDictValue('默认头像','default_headphoto_big','images/userinfobig.jpg');
 %>
<div class="row cropper-wrapper cropper-circle">
	<div class="col-xs-8">
		<div class="img-container">
			<img id="image" src="${user.photo}" onerror="this.onerror=null;this.src='${ctxStatic}/${defaultBigUrl}';">
		</div>
	</div>
	<div class="col-xs-4 pl0">
		<div class="clearfix">
			<div class="img-preview preview-lg"></div>
			<div class="img-preview preview-md"></div>
			<div class="img-preview preview-sm"></div>
			<div class="img-preview preview-xs"></div>
		</div>
        <div class="clearfix mt20"></div>
		<div class="btn-group">
			<button type="button" class="btn btn-default" data-method="zoom" data-option="0.1" title="放大">
				<span class="fa fa-fw fa-search-plus"></span>
			</button>
			<button type="button" class="btn btn-default" data-method="zoom" data-option="-0.1" title="缩小">
				<span class="fa fa-fw fa-search-minus"></span>
			</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default" data-method="move" data-option="-10" data-second-option="0" title="向左移动">
				<span class="fa fa-fw fa-arrow-left"></span>
			</button>
			<button type="button" class="btn btn-default" data-method="move" data-option="10" data-second-option="0" title="向右移动">
				<span class="fa fa-fw fa-arrow-right"></span>
			</button>
			<button type="button" class="btn btn-default" data-method="move" data-option="0" data-second-option="-10" title="向上移动">
				<span class="fa fa-fw fa-arrow-up"></span>
			</button>
			<button type="button" class="btn btn-default" data-method="move" data-option="0" data-second-option="10" title="向下移动">
				<span class="fa fa-fw fa-arrow-down"></span>
			</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default" data-method="rotate" data-option="-45" title="逆时针旋转">
				<span class="fa fa-fw fa-rotate-left"></span>
			</button>
			<button type="button" class="btn btn-default" data-method="rotate" data-option="45" title="顺时针旋转">
				<span class="fa fa-fw fa-rotate-right"></span>
			</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default" data-method="scaleX" data-option="-1" title="水平反转">
				<span class="fa fa-fw fa-arrows-h"></span>
			</button>
			<button type="button" class="btn btn-default" data-method="scaleY" data-option="-1" title="左右反转">
				<span class="fa fa-fw fa-arrows-v"></span>
			</button>
		</div>
		<div class="btn-group">
			<label class="btn btn-info btn-upload" for="inputImage" title="选择图片">
				<input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp">
				<span class="fa fa-fw fa-upload"></span> &nbsp;<b>选择图片</b>
			</label>
        </div>
		<div class="btn-group hide">
			<button id="btnGetImageBase64" type="button" class="btn btn-default" data-method="getCroppedCanvas" title="Get image Base64">
				<span class="fa fa-fw fa-download"></span>
			</button>
        </div>
	</div>
</div>
<% } %>
<script type="text/javascript">
	//判断图片是否加载完毕（src,onError）,再进行cropper初始化
function initImageCropper(img,callback){
    var timer = setInterval(function() {
        if(img.complete) {
            callback(img);
            clearInterval(timer);
        }
    }, 50)
}
initImageCropper(document.getElementById("image"),function (){
    var options = {
            dragMode: 'move',
            aspectRatio: 1/1,
            autoCropArea: 1,
            preview: ".img-preview",
            ready: function(){
                $(window).resize();
            }
        },
        $image = $("#image").cropper(options),
        URL = window.URL || window.webkitURL,
        uploadedImageType = 'image/png',
        uploadedImageURL, imageBase64;
    $('.btn-group').on('click', '[data-method]', function () {
        var $this = $(this), data = $this.data(), result,
            cropper = $image.data('cropper'), cropped;
        if ($this.prop('disabled') || $this.hasClass('disabled')) {
            return;
        }
        if (cropper && data.method) {
            data = $.extend({}, data); // Clone a new one
            cropped = cropper.cropped;
            switch (data.method) {
                case 'rotate':
                    if (cropped && options.viewMode > 0) {
                        $image.cropper('clear');
                    }
                    break;
                case 'getCroppedCanvas':
                    if (uploadedImageType === 'image/jpeg') {
                        if (!data.option) {
                            data.option = {};
                        }
                        data.option.fillColor = '#fff';
                    }
                    break;
            }
            result = $image.cropper(data.method, data.option, data.secondOption);
            switch (data.method) {
                case 'rotate':
                    if (cropped && options.viewMode > 0) {
                        $image.cropper('crop');
                    }
                    break;
                case 'scaleX':
                case 'scaleY':
                    $(this).data('option', -data.option);
                    break;
                case 'getCroppedCanvas':
                    if (result) {
                        imageBase64 = result.toDataURL(uploadedImageType);
                    }
                    break
            }
        }
    });
    $("#inputImage").change(function(){
        var files = this.files, file;
        if (!$image.data('cropper')) {
            return;
        }
        if (files && files.length) {
            file = files[0];
            if (/^image\/\w+$/.test(file.type)) {
                uploadedImageType = file.type;
                uploadedImageURL = URL.createObjectURL(file);
                $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                $(this).val('');// 清理下，方便下次选择
            } else {
                js.showMessage('请选择一个图片文件。');
            }
        }
        $(this).blur();
    }).focus(function(){
        js.loading();
    }).blur(function(){
        js.closeLoading();
    });
})
$(window).resize(function(){
	$('.img-container').height($(window).height()-50);
}).resize();
</script>